<template>
  <BasePage title="学校角色查询" description="查询学校管理员身份">
    <!-- 学校信息卡片 -->
    <StatusCard 
      status="success" 
      title="身份已确认" 
      description="您已成功确认学校管理员身份"
    >
      <div class="mt-4 space-y-3 text-sm">
        <div class="flex justify-between">
          <span class="text-gray-500">姓名</span>
          <span class="font-medium">{{ schoolInfo.name }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">工号</span>
          <span class="font-medium">{{ schoolInfo.staffId }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">部门</span>
          <span class="font-medium">{{ schoolInfo.department }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">职务</span>
          <span class="font-medium">{{ schoolInfo.position }}</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-500">联系电话</span>
          <span class="font-medium">{{ schoolInfo.phone }}</span>
        </div>
      </div>
    </StatusCard>
    
    <!-- 学院统计 -->
    <div class="mt-6 bg-white rounded-lg shadow-sm p-4">
      <h3 class="text-lg font-medium text-gray-800 mb-4">学院统计</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-blue-50 p-3 rounded-lg">
          <div class="text-blue-500 font-medium">{{ collegeStats.total }}</div>
          <div class="text-sm text-gray-500 mt-1">学院总数</div>
        </div>
        <div class="bg-green-50 p-3 rounded-lg">
          <div class="text-green-500 font-medium">{{ collegeStats.confirmed }}</div>
          <div class="text-sm text-gray-500 mt-1">已确认学院</div>
        </div>
        <div class="bg-yellow-50 p-3 rounded-lg">
          <div class="text-yellow-500 font-medium">{{ collegeStats.reported }}</div>
          <div class="text-sm text-gray-500 mt-1">今日已上报</div>
        </div>
        <div class="bg-red-50 p-3 rounded-lg">
          <div class="text-red-500 font-medium">{{ collegeStats.unreported }}</div>
          <div class="text-sm text-gray-500 mt-1">今日未上报</div>
        </div>
      </div>
    </div>
    
    <!-- 学院列表 -->
    <div class="mt-6 bg-white rounded-lg shadow-sm overflow-hidden">
      <h3 class="text-lg font-medium text-gray-800 p-4 border-b border-gray-100">学院列表</h3>
      <div class="divide-y divide-gray-100">
        <div 
          v-for="college in colleges" 
          :key="college.id"
          class="p-4 hover:bg-gray-50 transition-colors"
        >
          <div class="flex justify-between items-center">
            <div>
              <div class="font-medium text-gray-800">{{ college.name }}</div>
              <div class="text-sm text-gray-500 mt-1">{{ college.adminName }} | {{ college.adminPhone }}</div>
            </div>
            <div :class="[college.status === 'reported' ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600', 'px-2 py-1 rounded-full text-xs']">
              {{ college.status === 'reported' ? '已上报' : '未上报' }}
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 查询表单 -->
    <div class="mt-6 bg-white rounded-lg shadow-sm p-4">
      <h3 class="text-lg font-medium text-gray-800 mb-4">管理员查询</h3>
      
      <BaseForm @submit="queryAdmin">
        <div class="form-group">
          <label class="form-label">学院</label>
          <select v-model="queryForm.collegeId" class="form-input" required>
            <option value="">请选择学院</option>
            <option v-for="college in colleges" :key="college.id" :value="college.id">
              {{ college.name }}
            </option>
          </select>
        </div>
        
        <div class="form-group">
          <label class="form-label">管理员类型</label>
          <select v-model="queryForm.adminType" class="form-input" required>
            <option value="">请选择管理员类型</option>
            <option value="college">学院管理员</option>
            <option value="counselor">辅导员</option>
          </select>
        </div>
      </BaseForm>
    </div>
    
    <!-- 查询结果 -->
    <div v-if="showQueryResult" class="mt-6 bg-white rounded-lg shadow-sm p-4">
      <h3 class="text-lg font-medium text-gray-800 mb-4">查询结果</h3>
      
      <div v-if="queryResults.length > 0" class="divide-y divide-gray-100">
        <div 
          v-for="(admin, index) in queryResults" 
          :key="index"
          class="py-3"
        >
          <div class="font-medium text-gray-800">{{ admin.name }}</div>
          <div class="text-sm text-gray-500 mt-1">{{ admin.position }}</div>
          <div class="text-sm text-gray-500 mt-1">{{ admin.phone }}</div>
        </div>
      </div>
      
      <div v-else class="text-center py-6">
        <div class="text-gray-400 mb-2">未找到符合条件的管理员</div>
      </div>
    </div>
  </BasePage>
</template>

<script setup>
import { ref } from 'vue';
import BasePage from '../../components/BasePage.vue';
import BaseForm from '../../components/BaseForm.vue';
import StatusCard from '../../components/StatusCard.vue';

// 学校管理员信息
const schoolInfo = ref({
  name: '王校长',
  staffId: '10010001',
  department: '学生工作处',
  position: '处长',
  phone: '13900139000'
});

// 学院统计数据
const collegeStats = ref({
  total: 15,
  confirmed: 15,
  reported: 12,
  unreported: 3
});

// 学院列表
const colleges = ref([
  {
    id: '1',
    name: '计算机科学与技术学院',
    adminName: '张主任',
    adminPhone: '13800138000',
    status: 'reported'
  },
  {
    id: '2',
    name: '电子信息工程学院',
    adminName: '李主任',
    adminPhone: '13800138001',
    status: 'reported'
  },
  {
    id: '3',
    name: '机械工程学院',
    adminName: '赵主任',
    adminPhone: '13800138002',
    status: 'unreported'
  },
  {
    id: '4',
    name: '经济管理学院',
    adminName: '钱主任',
    adminPhone: '13800138003',
    status: 'reported'
  },
  {
    id: '5',
    name: '外国语学院',
    adminName: '孙主任',
    adminPhone: '13800138004',
    status: 'unreported'
  }
]);

// 查询表单
const queryForm = ref({
  collegeId: '',
  adminType: ''
});

// 查询结果
const showQueryResult = ref(false);
const queryResults = ref([]);

// 查询管理员
const queryAdmin = async () => {
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 800));
  
  // 显示查询结果
  showQueryResult.value = true;
  
  // 模拟查询结果
  if (queryForm.value.collegeId === '1' && queryForm.value.adminType === 'college') {
    queryResults.value = [
      {
        name: '张主任',
        position: '教学副院长',
        phone: '13800138000'
      }
    ];
  } else if (queryForm.value.collegeId === '1' && queryForm.value.adminType === 'counselor') {
    queryResults.value = [
      {
        name: '李辅导员',
        position: '计算机科学与技术辅导员',
        phone: '13800138010'
      },
      {
        name: '王辅导员',
        position: '软件工程辅导员',
        phone: '13800138011'
      },
      {
        name: '张辅导员',
        position: '人工智能辅导员',
        phone: '13800138012'
      }
    ];
  } else {
    queryResults.value = [];
  }
  
  // 在实际应用中，这里会发送请求到后端查询管理员
  console.log('查询管理员:', queryForm.value);
};
</script>